<template>
    <div>
      <Table :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="action">
          <Button v-if="row.manager===undefined || row.manager===''" type="primary" size="small" style="margin-right: 5px" @click="addManager(row)">添加管理员</Button>
          <Button v-else type="primary" size="small" style="margin-right: 5px" @click="updateManager(row)">修改管理员</Button>
          <!-- <Button v-if="row.manager===undefined || row.manager===''" type="info" size="small" style="margin-right: 5px" @click="addZBPerson(row)">专班人员管理</Button> -->
        </template>
      </Table>
      <Modal
        v-model="modal"
        title="管理人员"
        @on-ok="disposeManage">
        <Form :label-width="150">
          <FormItem label="管理员：">
            <Input v-model="manager" style="width: 300px" />
          </FormItem>
          <FormItem label="管理员联系电话：">
            <Input v-model="manager_tel" style="width: 300px" />
          </FormItem>
        </Form>
      </Modal>
      <!-- 专班人员列表管理 -->
      <Modal
        v-model="zbModal"
        width="1200"
        title="专班工作人员">
        <div style="text-align: center">
          <template>
            <div class="opt-area-02">
              <div class="left-con">
                <div class="input-frame">
                  <Input v-model="param.name" placeholder="请输入姓名"/>
                </div>
                <div class="input-frame">
                  <Input v-model="param.card_no" placeholder="请输入身份证号码" />
                </div>
                <Button type="primary" @click="selectlist(1)" style="margin-top: 0px;margin-right:10px">搜索</Button>
                <Button type="info" @click="selectlist(1)" style="margin-top: 0px;margin-right:10px">刷新</Button>
                <Button type="success" @click="addZbPersonInfo(1)" style="margin-top: 0px;margin-right:10px">添加</Button>
              </div>
            </div>
            <Table :columns="columns1" :data="data1" border>
              <template slot-scope="{ row, index }" slot="state">
                <span v-if="row.state == '1'">下沉干部</span>
                <span v-else-if="row.state == '2'">公安执法</span>
                <span v-else-if="row.state == '3'">医疗卫生（疾病控制）</span>
                <span v-else-if="row.state == '4'">社区工作者</span>
                <span v-else-if="row.state == '5'">物业人员</span>
                <span v-else-if="row.state == '6'">志愿者</span>
              </template>
              <template slot-scope="{ row, index }" slot="job">
                <span v-if="row.job == '1'">处长</span>
                <span v-else-if="row.job == '2'">副处长</span>
                <span v-else-if="row.job == '3'">科长</span>
                <span v-else-if="row.job == '4'">副科长</span>
              </template>
              <template slot-scope="{ row, index }" slot="level">
                <span v-if="row.level == '3'">区县</span>
                <span v-else-if="row.level == '4'">街道</span>
                <span v-else-if="row.level == '5'">社区</span>
                <span v-else-if="row.level == '6'">点位</span>
              </template>
              <template slot-scope="{ row, index }" slot="point_state">
                <span v-if="row.point_state == '1'">点位专班</span>
                <span v-else-if="row.point_state == '2'">应急机动队</span>
                <span v-else-if="row.point_state == '3'">预备队</span>
              </template>
              <template slot-scope="{ row, index }" slot="action">
                <Button type="warning" size="small" style="margin-right: 5px;margin-bottom:2px;" @click="seePersonInfo(row)">查看</Button>
                <Button type="primary" size="small" style="margin-right: 5px;margin-bottom:2px" @click="edit(row)">编辑</Button>
                <Button type="error" size="small" style="margin-right: 5px;margin-bottom:2px" @click="deleteZbPerson(row)">删除</Button>
              </template>
            </Table>
          </template>
        </div>
      </Modal>
      <!-- 添加专班人员 -->
      <Modal
        width="600"
        v-model="zbInfoModal"
        title="添加专班工作人员">
        <div>
          <template>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :disabled="editDisabled" :label-width="120">
                <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="身份证号" prop="card_no">
                    <Input v-model="formValidate.card_no" placeholder="请输入身份证号码"></Input>
                </FormItem>
                <FormItem label="联系方式" prop="mobile">
                    <Input v-model="formValidate.mobile" placeholder="请输入联系方式"></Input>
                </FormItem>
                <FormItem label="居住地" prop="address">
                    <Input v-model="formValidate.address" placeholder="请输入居住地"></Input>
                </FormItem>
                <FormItem label="是否为本社区居民" prop="resident">
                    <RadioGroup v-model="formValidate.resident">
                        <Radio label="是">是</Radio>
                        <Radio label="否">否</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="人员类别" prop="state">
                    <Select v-model="formValidate.state" placeholder="请选择人员类别">
                        <Option value="1">下沉干部</Option>
                        <Option value="2">公安执法</Option>
                        <Option value="3">医疗卫生（疾病控制）</Option>
                        <Option value="4">社区工作者</Option>
                        <Option value="5">物业人员</Option>
                        <Option value="6">志愿者</Option>
                    </Select>
                </FormItem>
                <FormItem label="点长类型" prop="point">
                    <Select v-model="formValidate.point" placeholder="请选择点长类型">
                        <Option v-if="formValidate.state != '5'" value="包保专班点长">包保专班点长</Option>
                        <Option v-if="formValidate.state == '5'" value="物业点长">物业点长</Option>
                        <Option value="非点长">非点长</Option>
                    </Select>
                </FormItem>
                <FormItem label="工作单位" prop="unit">
                    <Input v-model="formValidate.unit" placeholder="请输入工作单位"></Input>
                </FormItem>
                <FormItem label="职务" prop="job">
                    <Select v-model="formValidate.job" placeholder="请选择职务">
                        <Option value="1">处长</Option>
                        <Option value="2">副处长</Option>
                        <Option value="3">科长</Option>
                        <Option value="4">副科长</Option>
                    </Select>
                </FormItem>
                <FormItem label="级别" prop="level">
                    <Select v-model="formValidate.level" placeholder="请选择界级别">
                        <Option value="3">区县</Option>
                        <Option value="4">街道</Option>
                        <Option value="5">社区</Option>
                        <Option value="6">点位</Option>
                    </Select>
                </FormItem>
                <FormItem label="点位专班类别" prop="point_state">
                    <Select v-model="formValidate.point_state" placeholder="请选择点位专班类别">
                        <Option value="1">点位专班</Option>
                        <Option value="2">应急机动队</Option>
                        <Option value="3">预备队</Option>
                    </Select>
                </FormItem>
                <FormItem style="text-align:center;">
                    <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
          </template>
        </div>
      </Modal>
    </div>
</template>

<script>
import { findManagerList, saveManager, findSiteList, deleteSite, saveSite } from '@/api/eventlist'
import validateData from '../validate'
export default {
  name: 'manager',
  props: {
    pickInfo: Object
  },
  data () {
    return {
      manager: '',
      manager_tel: '',
      row: {},
      modal: false,
      zbModal: false, // 专班人员管理模态框
      zbInfoModal: false, // 专班人员管理模态框
      columns: [
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '管理员',
          key: 'manager'
        },
        {
          title: '管理员联系方式',
          key: 'manager_tel'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      data: [],
      editDisabled: false, // 专班人员信息是否可编辑
      param: {
        name: '',
        card_no: '',
        garden_id: ''
      },
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: '60',
          align: 'center',
          fixed: 'left'
        },
        {
          title: '姓名',
          key: 'name',
          width: '80',
          align: 'center',
          fixed: 'left'
        },
        {
          title: '身份证号',
          key: 'card_no',
          width: '160',
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'mobile',
          width: '120',
          align: 'center'
        },
        {
          title: '居住地',
          width: '200',
          key: 'address',
          align: 'center'
        },
        {
          title: '是否为本社区居民',
          key: 'resident',
          width: '120',
          align: 'center'
        },
        {
          title: '人员类别',
          slot: 'state',
          width: '120',
          align: 'center'
        },
        {
          title: '点长类型',
          key: 'point',
          width: '120',
          align: 'center'
        },
        {
          title: '工作单位',
          key: 'unit',
          width: '120',
          align: 'center'
        },
        {
          title: '职务',
          slot: 'job',
          width: '120',
          align: 'center'
        },
        {
          title: '级别',
          slot: 'level',
          width: '120',
          align: 'center'
        },
        {
          title: '点位专班类别',
          slot: 'point_state',
          width: '120',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: '100',
          align: 'center',
          fixed: 'right'
        }
      ],
      data1: [],
      searchInfo: {},
      formValidate: {
        name: '',
        card_no: '',
        mobile: '',
        address: '',
        resident: '',
        state: '',
        point: '',
        unit: '',
        job: '',
        level: '',
        point_state: ''
      },
      ruleValidate: validateData.ruleValidate
    }
  },
  methods: {
    init () {
      let data = {
        id: this.pickInfo.id,
        grade: this.pickInfo.grade
      }
      findManagerList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    addManager (e) {
      this.manager = ''
      this.row = {}
      this.row = e
      this.modal = true
    },
    updateManager (e) {
      this.manager = ''
      this.manager_tel = ''
      this.row = {}
      this.row = e
      this.manager = e.manager
      this.manager_tel = e.manager_tel
      this.modal = true
    },
    disposeManage () {
      let data = {
        id: this.row.id,
        grade: this.row.grade,
        manager: this.manager,
        manager_tel: this.manager_tel
      }
      saveManager(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '保存成功',
            desc: ret.data.errmsg
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '保存失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    addZBPerson (row) { // 专班人员管理
      this.grade_id = row.id
      this.getZBPersonList(this.grade_id)
      for (const key in this.formValidate) {
        console.log(key)
        this.formValidate[key] = ''
      }
      this.zbModal = true
    },
    addZbPersonInfo () {
      this.zbInfoModal = true
      for (const key in this.formValidate) {
        console.log(key)
        this.formValidate[key] = ''
      }
      this.ruleValidate = validateData.ruleValidate
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formValidate.garden_id = this.grade_id
          console.log(this.formValidate)
          saveSite(this.formValidate).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Notice.success({
                title: '保存成功',
                desc: ret.data.errmsg
              })
              this.zbInfoModal = false
              this.getZBPersonList()
            } else {
              this.$Notice.error({
                title: '保存失败',
                desc: ret.data.errmsg
              })
            }
          })
        } else {
          this.$Message.error('请填写必填内容!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    getZBPersonList (id) {
      this.param.garden_id = this.grade_id
      findSiteList(this.param).then(ret => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data
        } else {
          this.$Notice.error({
            title: '查看专班工作人员列表失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    selectlist () {
      this.getZBPersonList()
    },
    edit (row) { // 编辑专班人员信息
      this.editDisabled = false
      this.zbInfoModal = true
      this.formValidate = row
    },
    seePersonInfo (row) { // 查看专班人员信息
      this.editDisabled = true
      this.zbInfoModal = true
      this.formValidate = row
    },
    deleteZbPerson (row) { // 删除专班人员信息
      if (confirm('确定要删除该工作人员吗？')) {
        deleteSite({ id: row.id }).then(ret => {
          if (ret.data.errcode === 0) {
            this.getZBPersonList()
          } else {
            this.$Notice.error({
              title: '删除专班工作人信息失败',
              desc: ret.data.errmsg
            })
          }
        })
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
  .input-frame {
    width: 150px;
    margin-right: 10px;
    float: left;
  }
  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin: 5px;
    margin-bottom: 10px;
  }
  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }
  .opt-area-02 .left-con {
    font-size: 14px;
    width: 100%;
  }
  .opt-area-02 .left-con span {
    font-weight: bold;
  }
  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }
  .opt-area-02 .right-con .input-frame {
    width: 200px;
    margin-right: 10px;
  }
</style>
